<template>
    <Layout title="奈商城">
        <div class="home-search">
            <van-field
                v-model="searchName"
                left-icon="search"
                placeholder="输入您要搜索的宝贝"
                @click-left-icon="
                    $router.push({
                        path: '/goodList',
                        query: { name: searchName },
                    })
                "
            >
                <template #button>
                    <img src="@/assets/images/home-msg.png" alt="" />
                </template>
            </van-field>
        </div>
        <van-swipe class="home-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item
                v-for="item in bannerList"
                :key="'banner' + item.id"
            >
                <img v-lazy="item.img_url" alt="" />
            </van-swipe-item>
        </van-swipe>
        <van-grid class="home-cat" :border="false" :column-num="4">
            <van-grid-item @click="$router.push('/goodList/1')">
                <img src="@/assets/images/home-cat1.png" />
                <p>菲茨</p>
            </van-grid-item>
            <van-grid-item @click="$router.push('/goodList/2')">
                <img src="@/assets/images/home-cat2.png" />
                <p>克奈圃</p>
            </van-grid-item>
            <van-grid-item @click="$router.push('/goodList/3')">
                <img src="@/assets/images/home-cat3.png" />
                <p>服装</p>
            </van-grid-item>
            <van-grid-item @click="$router.push('/goodList/4')">
                <img src="@/assets/images/home-cat4.png" />
                <p>其他</p>
            </van-grid-item>
        </van-grid>
        <div class="home-recommend">
            <h2><span>精选推荐</span></h2>
            <van-list
                v-model="loading"
                @load="getGookList"
                :finished="finished"
                finished-text="没有更多了"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
            >
                <van-grid :border="true" :center="false" :column-num="2">
                    <van-grid-item
                        v-for="item in goodList"
                        :key="'goods' + item.id"
                        @click="$router.push('/goodLists/'+item.id)"
                    >
                        <van-image :src="item.pics[0]" />
                        <h3>{{ item.name }}</h3>
                        <p v-if="item.is_promote">
                            <span class="price1"
                                >￥{{ item.promote_price
                                }}{{ item.is_promote }}</span
                            >
                            <span class="price2">￥{{ item.price }}</span>
                        </p>
                        <p v-else>
                            <span class="price1">￥{{ item.price }}</span>
                        </p>
                        <img
                            v-if="item.is_promote"
                            class="promotion"
                            src="@/assets/images/home-promotion.png"
                        />
                    </van-grid-item>
                </van-grid>
            </van-list>
        </div>
    </Layout>
</template>

<script src="./js/index.js"></script>
<style lang="less" scoped src="./less/index.less"></style>